<!doctype html>
<html lang="zh-Hans-CN">

<head>
	<title>computed</title>
	<meta charset="utf-8">
	<meta name="keywords" content="">
	<meta name="description" content="">
	<meta name="author" content="chen">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="X-UA-Compatible" content="ie=edge, chrome=1">
	<!--<link rel="stylesheet" type="css/text" media="screen and ( min-width: 1200px )" href="">-->
	<link rel="stylesheet" type="text/css" media="screen" href="">
	<script defer="defer" src=""></script>
	<style>
		/*@import url("css/name.css") screen and ( min-width: 1200px );*/
	</style>
</head>

<body>
	<div id='app'>
		<table border = '1'>
			<caption>成绩表</caption>
			<thead>
				<tr>
					<th>科目</th>
					<th>分数</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<th>数学</th>
					<td><input type='text' v-model.number='math'></td>
				</tr>
				<tr>
					<th>物理</th>
					<td><input type='text' v-model.number='physics'></td>
				</tr>
				<tr>
					<th>英语</th>
					<td><input type='text' v-model.number='english'></td>
				</tr>
				<tr>
					<th>总分</th>
					<td><input type='text' v-model.number='sum'></td>
				</tr>
				<tr>
					<th>平均分</th>
					<td><input type='text' v-model.number='average'></td>
				</tr>
			</tbody>
		</table>
	</div>
	<script src='../lib/vue.js'></script>
	<script src='./app.js'>
	// 计算属性是有缓存的, 方便之处在于页面看起来比较干净, 没有过多的计算式, 调用时会优先调用缓存而不是每次计算
	// 一般用于通过其他数据算出一个新数据
	</script>
</body>

</html>